<template>
  <!-- 待办详情页面的容器 -->
  <div class="todo-detail">
    <!-- 页面标题 -->
    <h2>待办详情</h2>
    <!-- 如果待办事项存在，显示待办详情卡片 -->
    <el-card v-if="todo">
      <!-- 待办事项标题 -->
      <h3>{{ todo.title }}</h3>
      <!-- 开始时间 -->
      <p><strong>开始时间：</strong>{{ todo.start }}</p>
      <!-- 截至时间 -->
      <p><strong>截至时间：</strong>{{ todo.end }}</p>
      <!-- 内容 -->
      <p><strong>内容：</strong>{{ todo.content }}</p>
      <!-- 地点 -->
      <p><strong>地点：</strong>{{ todo.location }}</p>
      <!-- 状态 -->
      <p><strong>状态：</strong>{{ todo.done ? '已完成' : '进行中' }}</p>
      <!-- 标记状态按钮 -->
      <el-button 
        type="primary" 
        @click="toggleStatus"
        style="display: block; margin-bottom: 10px;"
      >
        <!-- 根据待办事项的状态显示不同的按钮文本 -->
        {{ todo.done ? '标记为未完成' : '标记为已完成' }}
      </el-button>
      <!-- 返回列表按钮，独占一行 -->
      <el-button 
        type="primary" 
        @click="goBack"
        style="display: block;"
      >
        返回列表
      </el-button>
    </el-card>
    <!-- 如果待办事项不存在，显示提示信息 -->
    <div v-else>
      <p>未找到该待办项</p>
    </div>
  </div>
</template>

<script setup>
// 从 vue-router 库中导入 useRoute 函数，用于获取当前路由信息
import { useRoute } from 'vue-router'
// 导入待办事项的状态管理仓库
import { useTodoStore } from '../store/to-do.js'
// 从 element-plus 库中导入 ElMessage 组件，用于显示提示信息
import { ElMessage } from 'element-plus'

// 获取当前路由信息
const route = useRoute()
// 获取待办事项的状态管理仓库实例
const store = useTodoStore()
// 查找对应待办
const todo = store.todos.find(t => t.id === Number(route.params.id))

// 切换完成状态
const toggleStatus = () => {
  if (todo) {
    // 调用仓库的 toggleTodo 方法切换待办事项的状态
    store.toggleTodo(todo.id)
    // 显示切换成功的提示信息
    ElMessage.success('待办事项状态切换成功！')
  } else {
    // 显示未找到待办事项的提示信息
    ElMessage.error('未找到该待办事项，无法切换状态！')
  }
}

// 返回待办列表
const goBack = () => {
  // 返回上一页
  window.history.back()
}
</script>

<style scoped>
.todo-detail {
  /* 设置最大宽度为 600px */
  max-width: 600px;
  /* 上下外边距为 0，左右居中 */
  margin: 0 auto;
  /* 内边距为 20px */
  padding: 20px;
}
.el-card {
  /* 上外边距为 20px */
  margin-top: 20px;
}
</style>